<script setup>
import { onBeforeMount, onMounted, reactive, ref, toRefs } from 'vue';
import { useItem } from '../../../../../store/index.js';
import { getSecretListHandler as getList } from '../../../../../api/secret.js'
const useItemer = useItem()
const props = defineProps({
    envFrom: {
        type: Array
    },
    method: {
      type: String,
      default: "Create"
    },
    envFromItem: {
      type: Object
    }
})

const data = reactive({
  items: [],
  envFromItem: {
    prefix: '',
    secretRef: {
      name: ''
    },
  }
})
const visibleChanged = (visible)=>{
  console.log("visible:",visible)
  // 展开的时候去查询items
  if (visible) {
    // 调用查询列表的函数
    const getData = {
      clusterId: useItemer.clusterId,
      namespace: useItemer.namespace
    }
    getList(getData).then(
      (res) => {
        data.items = res.data.data.items
        console.log(data.items)
      }
    )
  }
}
const emits = defineEmits(['closeDialog'])
const submit = ()=>{
  if (props.envFrom == null || props.envFrom == undefined) {
    props.envFrom = []
  }
  props.envFrom.push(JSON.parse(JSON.stringify(data.envFromItem)))
  emits('closeDialog')
}
onMounted(()=>{
  if (props.method == 'Update') {
    data.envFromItem = props.envFromItem
  }
  
})
const envFromItemRef = ref()
const {items,envFromItem} = toRefs(data)
</script>

<template>
    <el-form v-model="envFromItem" ref="envFromItemRef"  label-position="left"  :label-width="props.method=='Create'?'':'120px'" >
    <div style="display: flex;">
      <el-form-item v-if="props.method=='Create'"  label="变量前缀"  prop="prefix" style="margin-right: 20px;">
        <el-input v-model.trim="envFromItem.prefix" placeholder="变量前缀" style="width: 140px;"></el-input>
      </el-form-item>
      <el-form-item  label="选择Secret"  prop="secretRef.name">
        <el-select v-model="envFromItem.secretRef.name" placeholder="请选择Secret" @visible-change="visibleChanged">
          <el-option
            v-for="item in items"
            :key="item.metadata.name"
            :label="item.metadata.name"
            :value="item.metadata.name"
          />
        </el-select> 
      </el-form-item>
    </div>
    <!-- 按钮 -->
    <div>
      <el-button style="display: flex; margin: 10px 0 0 0;" v-if="props.method=='Create'" type="primary" @click="submit()">添加</el-button>
    </div>
  </el-form>
</template>

<style scoped>

</style>
